<template>
<!-- dialogVisible 控制展示与否 -->
  <el-dialog
    v-model="visible"
    title="提示"
    width="500"
  >
  <!-- 此处展示的message依赖父组件传值 -->
    <span>{{ message }}</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, defineEmits, defineProps } from 'vue'

// 定义 props 接收父组件传递的数据
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  message: {
    type: String,
    default: '确定要执行此操作吗？'
  }
})

// 定义 emits 声明要触发的事件
const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])

// 使用计算属性实现 v-model 的双向绑定
const visible = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

const handleConfirm = () => {
  console.log('用户点击了确认按钮')
  // 触发父组件的确认回调
  emit('confirm')
  // 关闭对话框
  emit('update:modelValue', false)
}

const handleCancel = () => {
  console.log('用户点击了取消按钮')
  // 触发父组件的取消回调
  emit('cancel')
  // 关闭对话框
  emit('update:modelValue', false)
}
</script>
